﻿<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	
	xmlns:ctrls="clr-namespace:CG.SpotifyControl.Controls"
>
	<!-- Colors -->
	<RadialGradientBrush x:Key="ButtonBackground" Center="0.5,0.5" GradientOrigin="0,0">
		<RadialGradientBrush.RelativeTransform>
			<TransformGroup>
				<ScaleTransform CenterX="0.5" CenterY="0.5"/>
				<SkewTransform CenterX="0.5" CenterY="0.5"/>
				<RotateTransform CenterX="0.5" CenterY="0.5"/>
				<TranslateTransform/>
			</TransformGroup>
		</RadialGradientBrush.RelativeTransform>
		<GradientStop Color="#FFEAEAEA" Offset="0.004"/>
		<GradientStop Color="#FF6E6E6E" Offset="1"/>
	</RadialGradientBrush>
	<LinearGradientBrush x:Key="ButtonStroke" EndPoint="0.5,1" StartPoint="0.5,0">
		<LinearGradientBrush.RelativeTransform>
			<TransformGroup>
				<ScaleTransform CenterX="0.5" CenterY="0.5"/>
				<SkewTransform CenterX="0.5" CenterY="0.5"/>
				<RotateTransform Angle="-60" CenterX="0.5" CenterY="0.5"/>
				<TranslateTransform/>
			</TransformGroup>
		</LinearGradientBrush.RelativeTransform>
		<GradientStop Color="#339A9A9A" Offset="0"/>
		<GradientStop Color="#7F353535" Offset="1"/>
		<GradientStop Color="#264F4F4F" Offset="0.638"/>
	</LinearGradientBrush>
	<SolidColorBrush x:Key="GlyphBackground" Color="#FF2F2F2F"/>
	<SolidColorBrush x:Key="GlyphStroke" Opacity="0.4" Color="#FF474747"/>
	
	
	<!-- Styles -->
	<Style x:Key="GlyphStyle" TargetType="Shape">
		<Setter Property="StrokeThickness" Value="0.4" />
		<Setter Property="Stroke">
			<Setter.Value>
				<SolidColorBrush Opacity="0.4" Color="#FF474747" />
			</Setter.Value>
		</Setter>
	</Style>
	
	<!-- Glyphs -->
	<Canvas x:Key="PauseGlyph" Margin="3" HorizontalAlignment="Stretch" Width="5" Opacity="1" Height="8">
		<Rectangle Fill="{StaticResource GlyphBackground}" Style="{StaticResource GlyphStyle}" HorizontalAlignment="Stretch" Margin="0" Width="2" Height="8" Canvas.Left="0" Canvas.Top="0" RadiusX="0.2" RadiusY="0.2" />
		<Rectangle Fill="{StaticResource GlyphBackground}" Style="{StaticResource GlyphStyle}" HorizontalAlignment="Stretch" Margin="0" Width="2" Height="8" Canvas.Left="3" Canvas.Top="0" RadiusX="0.2" RadiusY="0.2" />
	</Canvas>
	<Path x:Key="PlayGlyph" Style="{StaticResource GlyphStyle}" Fill="{StaticResource GlyphBackground}" Width="8" Height="8" Data="M0.2550653,7.7510436 L0.2550653,0.24895629 7.7449348,3.9999994 z" HorizontalAlignment="Stretch" Margin="1,0,0,0" d:LayoutOverrides="VerticalAlignment" StrokeLineJoin="Round" />
	<Canvas x:Key="NextGlyph" Height="5.5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="8.5">
		<Path Style="{StaticResource GlyphStyle}" Fill="{StaticResource GlyphBackground}" Width="4" Height="5" Data="M0.2550653,7.7510436 L0.2550653,0.24895629 7.7449348,3.9999994 z" HorizontalAlignment="Left" StrokeLineJoin="Round" Stretch="Fill" Canvas.Top="0" Margin="0,0.25,0,0" />
		<Path Style="{StaticResource GlyphStyle}" Fill="{StaticResource GlyphBackground}" Width="4" Height="5" Data="M0.2550653,7.7510436 L0.2550653,0.24895629 7.7449348,3.9999994 z" StrokeLineJoin="Round" Stretch="Fill" Canvas.Top="0" Margin="3.5,0.25,0,0" HorizontalAlignment="Left" />
		<Rectangle Fill="{StaticResource GlyphBackground}" Style="{StaticResource GlyphStyle}" HorizontalAlignment="Stretch" Margin="7,0,0,0" Width="1.5" Height="5.5" Canvas.Left="0" Canvas.Top="0" RadiusX="0.2" RadiusY="0.2" />
	</Canvas>
	<Canvas x:Key="PreviousGlyph" Height="5.5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="8.5" RenderTransformOrigin="0.5,0.5">
		<Path Style="{StaticResource GlyphStyle}" Fill="{StaticResource GlyphBackground}" Width="4" Height="5" Data="M0.2550653,7.7510436 L0.2550653,0.24895629 7.7449348,3.9999994 z" HorizontalAlignment="Left" StrokeLineJoin="Round" Stretch="Fill" Canvas.Top="0" Margin="0,0.25,0,0" />
		<Path Style="{StaticResource GlyphStyle}" Fill="{StaticResource GlyphBackground}" Width="4" Height="5" Data="M0.2550653,7.7510436 L0.2550653,0.24895629 7.7449348,3.9999994 z" StrokeLineJoin="Round" Stretch="Fill" Canvas.Top="0" Margin="3.5,0.25,0,0" HorizontalAlignment="Left" />
		<Rectangle Fill="{StaticResource GlyphBackground}" Style="{StaticResource GlyphStyle}" HorizontalAlignment="Stretch" Margin="7,0,0,0" Width="1.5" Height="5.5" Canvas.Left="0" Canvas.Top="0" RadiusX="0.2" RadiusY="0.2" />
		<Canvas.RenderTransform>
			<TransformGroup>
				<ScaleTransform/>
				<SkewTransform/>
				<RotateTransform Angle="180"/>
				<TranslateTransform/>
			</TransformGroup>
		</Canvas.RenderTransform>
	</Canvas>


	<!-- Templates -->
	<ControlTemplate x:Key="ToggleButtonAction" TargetType="{x:Type ctrls:ToggleButtonTwoStates}">
		<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Width}">
			<VisualStateManager.VisualStateGroups>
				<VisualStateGroup x:Name="CheckStates">
					<VisualState x:Name="Checked">
						<Storyboard>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonCheckedPresenter">
								<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</VisualState>
					<VisualState x:Name="Unchecked">
						<Storyboard>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonUncheckedPresenter">
								<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</VisualState>
				</VisualStateGroup>
			</VisualStateManager.VisualStateGroups>
			<Ellipse x:Name="ellipse" Fill="{DynamicResource ButtonBackground}" Stroke="{StaticResource ButtonStroke}" />
			<ContentPresenter x:Name="ButtonCheckedPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ButtonStateChecked}" Opacity="0" />
			<ContentPresenter x:Name="ButtonUncheckedPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ButtonStateUnchecked}" Opacity="0" />
		</Grid>
		<ControlTemplate.Triggers>
			<Trigger Property="IsEnabled" Value="False">
				<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource ButtonStroke}"/>
			</Trigger>
		</ControlTemplate.Triggers>
	</ControlTemplate>
	
	<ControlTemplate x:Key="ButtonAction" TargetType="{x:Type Button}">
		<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Width}">
			<Ellipse x:Name="ellipse" Fill="{DynamicResource ButtonBackground}" Stroke="{StaticResource ButtonStroke}" />
			<ContentPresenter x:Name="ButtonPresenter" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" Opacity="1" />
		</Grid>
		<ControlTemplate.Triggers>
			<Trigger Property="IsEnabled" Value="False">
				<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource ButtonStroke}"/>
			</Trigger>
		</ControlTemplate.Triggers>
	</ControlTemplate>
</ResourceDictionary>